<script setup lang="ts">
import { requiredCheck, singleIpCheck, validatePortCheck, validDomian, validMultiMac } from "@/utils/verify";
import { ref } from "vue";
import { addData, editData } from "@/api/modules/control-strategy/policy";

interface Props {
  title?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "新增",
  rowData: undefined
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import SelectLinksInput from "@/components/SelectLinksInput/index.vue";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    ip: [...requiredCheck("请输入IP"), { validator: singleIpCheck }],
    mac: [...requiredCheck("请输入MAC地址"), { validator: validMultiMac }],
    dns: [...requiredCheck("请输入域名"), { validator: validDomian }]
  },
  defaultData: {
    type: "1"
  }
});

async function submitCb() {
  await submit({
    addApi: addData,
    updateApi: editData,
    sendData: {
      type: updateFormData.type,
      iswhite: 1,
      policystr:
        updateFormData.type == 1 ? updateFormData.ip : updateFormData.type == 2 ? updateFormData.mac : updateFormData.dns,
      id: props.rowData?.id,
      pid: props.rowData?.pid
    }
  });
  emits("success");
}

async function openHandleCb() {
  await openHandle({
    row: {
      ...props.rowData
    },
    id: props.rowData?.id
  });
  if (props.rowData.type == 1) {
    updateFormData.ip = props.rowData?.policystr;
  }
  if (props.rowData.type == 2) {
    updateFormData.mac = props.rowData?.policystr;
  }
  if (props.rowData.type == 3) {
    updateFormData.dns = props.rowData?.policystr;
  }
}
</script>

<template>
  <div class="update-form mg-r-sm" style="display: inline-block; height: 53px" @click="openHandleCb">
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="450px" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="120px" label-suffix="：">
          <el-form-item label="类型" prop="name">
            <el-select :disabled="updateFormData.id" style="width: 220px" v-model="updateFormData.type">
              <el-option label="IP" value="1"></el-option>
              <el-option label="MAC" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="updateFormData.type == 1" label="IP" prop="ip">
            <el-input style="width: 220px" v-model="updateFormData.ip" auto-complete="off" placeholder="请输入IP" />
          </el-form-item>
          <el-form-item v-if="updateFormData.type == 2" label="MAC" prop="mac">
            <el-input style="width: 220px" v-model="updateFormData.mac" auto-complete="off" placeholder="请输入MAC" />
          </el-form-item>
          <el-form-item v-if="updateFormData.type == 3" label="域名" prop="dns">
            <el-input style="width: 220px" v-model="updateFormData.dns" auto-complete="off" placeholder="请输入域名" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped></style>
